<template>
  <div class="app-container" 
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <el-row type="flex" justify="center" class="cardWrap" :gutter="40">
      <el-col :span="9">
        <el-card class="box-card" shadow="hover">
          <span>现在是：</span>
          <div  class="text item">
            <div class="time-box">
              <h1 class="time">{{time}}</h1>
              <br><br>
              <h1>{{date}}</h1>
            </div>
            <div class="bottom">
              <el-button @click="success" :loading="loading" class="a-button" type="primary" round>签到</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="14">
        <el-card class="box-card1" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="title">打卡记录</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
        </div>
        <el-table
          :data="tableData"
          class="signTab">
          <el-table-column
            prop="punchTime"
            label="打卡时间"
            sortable
            >
          </el-table-column>
          <!-- <el-table-column
            prop="address"
            label="地址"
            :formatter="formatter">
          </el-table-column> -->
          <el-table-column
            prop="tag"
            label="状态"
            width="100"
            :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
            :filter-method="filterTag"
            filter-placement="bottom-end">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.tag === '家' ? 'primary' : 'success'"
                disable-transitions>{{scope.row.tag}}</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { formatDate } from "../../js/date.js";
import qs from "qs";
export default {
  data() {
    return {
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      date: "",
      time: "",
      tableData: [
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          tag: "家"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          tag: "公司"
        }
      ],
      loading: false
    };
  },
  computed: {
    formatDate() {
      var date = new Date();
      return formatDate(date, "yyyy-MM-dd hh:mm");
    }
  },
  methods: {
    formatter(row, column) {
      return row.address;
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
    success() {
      this.loading = true;
      let userName = window.localStorage.getItem("userName")
      this.$axios
        .post(
          "http://localhost:8088/punch",
          qs.stringify({
            userName: userName
          }),
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(res => {
          console.log(res);
          this.$notify({
            title: "成功",
            message: "签到成功",
            type: "success"
          });
          this.loading = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    onSubmit() {
      this.$message("submit!");
    },
    onCancel() {
      this.$message({
        message: "cancel!",
        type: "warning"
      });
    }
  },
  created() {
    setInterval(() => {
      this.time = new Date().format("hh:mm:ss");
      this.date = new Date().format("yyyy年MM月dd日 D");
    }, 20);
    this.$axios
      .post("http://localhost:8088/getPunch", qs.stringify({}), {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      })
      .then(res => {
        console.log(res.data.data);
        this.tableData = res.data.data
        
      })
      .catch(err => {
        console.log(err);
      });
  }
};
Date.prototype.format = function(fmt) {
  //author: meizz
  var Day = [
    "星期天",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六"
  ];
  var o = {
    "M+": this.getMonth() + 1, //月份
    "d+": this.getDate(), //日
    "h+": this.getHours(), //小时
    "m+": this.getMinutes(), //分
    "s+": this.getSeconds(), //秒
    "q+": Math.floor((this.getMonth() + 3) / 3), //季度
    S: this.getMilliseconds(), //毫秒
    D: Day[this.getDay()]
  };
  if (/(y+)/.test(fmt))
    fmt = fmt.replace(
      RegExp.$1,
      (this.getFullYear() + "").substr(4 - RegExp.$1.length)
    );
  for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt))
      fmt = fmt.replace(
        RegExp.$1,
        RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
      );
  return fmt;
};
</script>

<style scoped lang="scss">
// .line {
//   text-align: center;
// }
// .text {
//   font-size: 14px;
// }

.item {
  padding: 18px 0;
  .bottom {
    text-align: center;
    margin-top: 20%;
    width: 100%;
    height: 20%;
  }
  .a-button {
    width: 70%;
  }
  .time-box {
    padding-top: 20%;
    width: 100%;
  }
}
.el-card__body {
  padding: 15px;
}
.cardWrap {
  position: relative;
  float: left;
  left: 4%;
  // height: 30%;
  .box-card {
    text-align: center;
    // height: 100%;
    width: 40%;
    min-width: 330px;
    span {
      display: block;
      float: left;
      margin: 0 4%;
      font-size: 30px;
      font-weight: bold;
    }
  }
}


.time {
  font-size: 400%;
}
.box-card1{
  min-height: 380px;
  .title{
    font-size: 22px;
    font-weight: bold;
  }
}
</style>

